<template>
  <div class="rechargeDetail">
    <van-nav-bar
      :title="type2 + $t('详情')"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="flex flex-col items-center justify-center">
      <div class="text-grey font-32 num-text">{{ $t("数量") }}</div>
      <div class="font-55 textColor">
        <span class="font-bold">{{ info.amount }}</span>
        <span class="font-45 ml10">{{ info.coin }}</span>
      </div>
      <div class="flex items-center justify-center mt53 mb16">
        <img
          :src="
            require(`@/assets/image/assets-center/${
              status[info.state].split('_')[1]
            }.png`)
          "
          width="18"
          height="18"
        />
        <span class="ml10 font-32 textColor"
          >{{ type2
          }}{{ status[info.state] && status[info.state].split("_")[0] }}</span
        >
      </div>
      <div class="text-grey font-26 pl-30 pr-30">
        {{ $t("数字币已经") }}{{ $t(type2)
        }}{{ status[info.state] && status[info.state].split("_")[0]
        }}{{ $t("。您可以在钱包账户中查看详情。") }}
      </div>
    </div>
    <div class="border-light-grey mt42"></div>
    <div class="font-30 pl-30 pr-30 mt53">
      <div class="flex justify-between mb74">
        <div class="text-grey">{{ $t("确认数") }}</div>
        <div class="textColor">12/12</div>
      </div>
      <div class="flex justify-between mb74">
        <div class="text-grey">{{ type2 }}{{ $t("账户") }}</div>
        <div class="textColor">{{ $t("钱包账户") }}</div>
      </div>
      <div class="flex justify-between mb74">
        <div class="text-grey">{{ $t("转账网络") }}</div>
        <div class="textColor">{{ info.coin_blockchain }}</div>
      </div>
      <div class="flex justify-between mb74">
        <div class="text-grey pr-20">{{ $t("地址") }}</div>
        <div class="flex">
          <div class="font-30 text-underline textColor break-word">
            {{ info.from || info.to }}
          </div>
          <img
            src="../../assets/image/assets-center/copy.png"
            width="15"
            height="15"
            class="ml10 ml-20"
            @click="copy(info.from || info.to)"
          />
        </div>
      </div>
      <!--             <div class="flex justify-between mb74">-->
      <!--                <div class="text-grey">{{ $t('交易哈希') }}</div>-->
      <!--                <div class="flex">-->
      <!--                    <div class="font-30 text-underline">{{info.tx || '-'}}</div>-->
      <!--                    <img src="../../assets/image/assets-center/copy.png" width="15" height="15" class="ml10 ml-20" @click="copy(info.tx)"/>-->
      <!--                </div>-->
      <!--             </div>-->
      <div class="flex justify-between mb74">
        <div class="text-grey">{{ $t("日期") }}</div>
        <div class="textColor">{{ info.create_time }}</div>
      </div>
      <!--状态state 1成功，2失败。充值备注和失败原因，都用failure_msg 字段， 
                提现:驳回备注用:failure_msg，成功用：remark -->
      <!-- <div class="flex justify-between mb74" v-if="info.state==1">
                <div class="text-grey">{{ $t('备注') }}</div>
                <div class="textColor" v-if="type2==$t('充值')">{{ info.failure_msg || '-' }}</div>
                <div class="textColor" v-else>{{ info.remark || '-' }}</div>
            </div>        -->
      <div class="flex justify-between mb74">
        <div class="text-grey">{{ $t("备注") }}</div>
        <div class="textColor">{{ info.failure_msg || "-" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { _rechargeDetail, _withdrawDetail } from "@/API/fund.api";
export default {
  name: "rechargeDetail",
  props: {
    type: {
      type: String,
      default: "充值",
    },
  },
  computed: {
    type2() {
      let res;
      if (this.type === "充值") {
        res = this.$t("充值") + " ";
      } else {
        res = this.$t("提现") + " ";
      }
      return res;
    },
  },
  data() {
    return {
      order_no: "",
      info: {
        state: 0,
      },
      status: [
        this.$t("确定中") + "_identifing",
        this.$t("成功") + "_small-success",
        this.$t("失败") + "_icon-close",
      ],
    };
  },
  created() {
    this.order_no = this.$route.query.order_no;
    const _api = this.type === "充值" ? _rechargeDetail : _withdrawDetail;
    _api(this.order_no).then((data) => {
      this.info = data;
    });
  },
  methods: {
    copy(val) {
      if (!val) {
        return;
      }
      navigator.clipboard.writeText(val).then(() => {
        this.$toast.success(this.$t("已复制"));
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.rechargeDetail {
  width: 100%;
  box-sizing: border-box;

  ::v-deep .van-hairline--bottom::after {
    @include themify() {
      border-color: themed("border_color");
    }
  }
}

.num-text {
  margin-top: 70px;
  margin-bottom: 30px;
}

.mb53 {
  margin-bottom: 53px;
}

.ml10 {
  margin-left: 10px;
}

.mt53 {
  margin-top: 53px;
}

.mb16 {
  margin-bottom: 16px;
}

.mt42 {
  margin-top: 42px;
}

.mb74 {
  margin-bottom: 74px;
}

.text-underline {
  text-decoration: underline;
}
</style>
